<div class="well" style="margin-top: 10px;background-color: #fffad3;">
  <div data-bind="compose:{view:'alert/danger.html'}"></div>
  <div data-bind="compose:{view:'alert/info.html'}"></div>
  <div data-bind="compose:{view:'alert/success'}"></div>
  <div data-bind="compose:{view:'alert/warning'}"></div>
  <hr style="border: 1px solid red;" />
  <div data-bind="compose:{model:'components/datetime/index'}"></div>
  <div data-bind="compose:{model:'viewmodels/show-module-id'}"></div>
  <div data-bind="compose:{model:'viewmodels/show-module-json'}"></div>
  <hr style="border: 1px solid red;" />
  <div data-bind="compose:{view:'show-module-id.html'}"></div>
  <div data-bind="compose:{view:'show-module-json'}"></div>
  <hr style="border: 1px solid red;" />
  <div
    data-bind="compose:{model:'components/dangerous/fire',view:'views/alert/danger.html'}"
  ></div>
  <div
    data-bind="compose:{model:'components/dangerous/water',view:'views/alert/danger.html'}"
  ></div>
  <div
    data-bind="compose:{model:'components/dangerous/fog',view:'views/alert/danger.html'}"
  ></div>
  <hr style="border: 1px solid red;" />
  <div data-bind="compose:{model:fire,view:'views/alert/danger.html'}"></div>
  <div
    data-bind="compose:{model:'components/dangerous/fire',view:danger}"
  ></div>
  <hr style="border: 1px solid red;" />
  <div data-bind="compose:{model:'components/dangerous/fire',mode:'inline'}">
    <h3 data-bind="text:tip"></h3>
  </div>
  <div>A:</div>
  <div data-bind="compose:{view:'alert/notice.html', mode:'templated'}">
    <!-- 此处的part是用于填充notice视图中的tip部分 -->
    <div data-part="tip" data-bind="compose:{view:'alert/danger.html'}"></div>
  </div>
  <div>B:</div>
  <div
    data-bind="compose:{view:'views/alert/notice.html',model:fire, mode:'templated'}"
  >
    <!-- 此处的part是用于填充notice视图中的tip部分 -->
    <div data-part="tip" data-bind="compose:{view:'alert/danger.html'}"></div>
  </div>
</div>
